How style sheets are embedded in HTML

Using Cascading Style Sheets > About cascading style sheets > How style sheets are embedded in HTML

Unlike HTML, the CSS1 mechanism keeps formatting instructions for HTML tags together in a container enclosed in a <STYLE> tag (= the style sheet), instead of interspersing them with the flow of HTML code. When loading the page, the browser reads the formatting instructions contained in that tag and caches them with the page. Subsequently, whenever the program finds an instance of an HTML tag for which custom format definitions exist in the style sheet, it applies those rules.

Cascading style sheets are embedded in the HTML using the <STYLE> tag. This tag has a TYPE attribute; its value is set to "text/css" by default. TYPE="text/css" tells the browser to interpret any formatting instructions enclosed in the <STYLE> tag as a CSS1 style sheet and build the screen display according to the rules specified within. Although CSS1 is the predominant style sheet mechanism currently in use on the Web, this type description may reduce conflicts with future style sheet mechanisms on the Web.

The following is an example of a basic, yet complete style sheet:

<!--

h1 {font-size: 36pt} -->

</STYLE>

You'll notice that the rules are enclosed in  HTML comment tags. These tags instruct browsers that are unaware of the style tag to ignore the tags (unknown tags are ignored).

CSS1 containment in HTML pages is based on external or internal style sheets. Adobe GoLive supports the four basic methods of embedding--the <LINK> tag and the @import command for external style sheets, and the <STYLE> tag and class element for internal style sheets.

External style sheets External style sheets are text-only documents containing nothing but style definitions. They can either be referenced or imported:

A style sheet document can be referenced within the HTML page using the <LINK> tag. By referencing external style sheets, style definitions can be applied to several pages at a time or even to all pages throughout a site. Adobe GoLive reads and writes references to external style sheets. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://style.com/cool" TITLE="Cool">

</HEAD>

<BODY>

<H1>This page has an external stylesheet attached.</H1>

</BODY>

</HTML>

A referenced external style sheet works much like a master style sheet in a word-processing application. As with style sheets for word processing files, some definitions are "hard wired" to certain types of text. Also, you can override the definitions within the document and assign styles explicitly to selected text.

A style sheet can explicitly import another style sheet using a dedicated @import command. The imported style sheet is merged with any local style sheets. Adobe GoLive reads these import notations from existing files (if they have the proper syntax) and lists them in the Style Sheet window, but it won't let you create any notations. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

@import url(http://style.com/basic);

</STYLE>

</HEAD>

<BODY>

<H1>This page has an imported stylesheet.</H1>

</BODY>

</HTML>

Internal style sheets Internal style sheets are confined to the document they are contained in. There are several methods for embedding internal style sheets:

An internal style is based on a <STYLE> tag with one or more selectors for HTML tags within the document. Embedded in the header section, this style sheet is only valid for the local page. This type of style sheet applies uniform styles to several instances of a tag within a document. Once these styles have been defined, they are automatically applied without any user intervention. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<!--

H1 {

font-weight: bold;

font-size: 24pt;

font-family: sans-serif;

}

-->

</STYLE>

</HEAD>

<BODY>

<H1>This page holds an internal stylesheet.</H1>

</BODY>

</HTML>

An internal <STYLE> element with tag selectors works much like a word processor style sheet embedded in a file, the only difference being that its styles are "hard-wired" to certain text elements. You can change definitions within the document, but you cannot assign a style explicitly to selected text.

Another type of internal style sheet applies special formatting to individual blocks of text within the body section. It is based on a CLASS definition in the header and local CLASS attributes assigned to selected tags or paragraphs.

The CLASS element closely resembles user-defined paragraph and character styles in a word-processing application in that the author creates and applies the style definition. CLASS style elements are easily recognized by their name, which begins with a period, as in .headline. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<!--

.headline { color: #00FF00 }

.bodycolored { color: #0099FF }

-->

</STYLE>

</HEAD>

<BODY>

<H1 CLASS=headline>This headline is formatted using a CLASS element.</H1>

<P CLASS=bodycolored>This paragraph has a custom color.</P>

</BODY>

</HTML>

The CLASS element works much like a paragraph or character style in a word-processing application. You can change its definition within the document and assign it to selected paragraphs.

The ID element is a special style element. It also consists of a style definition in the header but is locally confined to a unique element within the page. An alphanumeric identifier that appears within the definition and the tag it controls makes the assignment. The name of ID style elements starts with a pound sign, as in #yz98. An example follows:

<HTML>

<HEAD>

<TITLE>title</TITLE>

<!--

#z99y { letter-spacing: 2em }

-->

</STYLE>

</HEAD>

<BODY>

<P ID=z98y>This text has extra-wide letter spacing.</P>

</BODY>

</HTML>

Using Cascading Style Sheets > About cascading style sheets > How style sheets are embedded in HTML